<template>
  <div>
    <van-nav-bar v-if="this.path == '/home'" title="济南黑马程序员实战项目" />
    <van-nav-bar
      v-else
      title="济南黑马程序员实战项目-ugo"
      left-text="返回"
      @click-left="onClickLeft"
      left-arrow
    />
    <div v-if="this.path === '/home'">
      <div class="lb">
        <van-swipe :autoplay="3000" loop="false" width="100%">
          <van-swipe-item v-for="(item) in swipelist" :key="item.id">
            <img :src="item.img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-grid clickable :column-num="3">
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu1.15200d52.png"
          text="新闻资讯"
          to="/newslist"
        />
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu2.64e2fbce.png"
          text="图片分享"
          to="/"
        />
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu3.a99e8466.png"
          text="商品购买"
          to="/goods"
        />
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu4.64d2fcb9.png"
          text="留言反馈"
          to="/"
        />
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu5.28fc050c.png"
          text="视频专区"
          to="/"
        />
        <van-grid-item
          icon="http://destiny001.gitee.io/projecttraining/img/menu6.19ace747.png"
          text="联系我们"
          to="/"
        />
      </van-grid>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swipelist: [],
      path: '/home'
    }
  },
  created: function() {
    this.getswipelist()
  },
  watch: {
    $route(to, from) {
      // console.log(to.path)
      const data = to.path
      this.path = data
      // console.log(this.path)
    }
  },
  methods: {
    getswipelist: async function() {
      const data = await this.$http.get('http://www.liulongbin.top:3005/api/getlunbo');
      this.swipelist = data.message;
      console.log(data.message);
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
}
img {
  width: 100%;
  height: 230px;
  vertical-align: bottom;
}
</style>
